<template>
	<view class="gt-select-datetime">
		<view class="gt-form-item pointer">
			<view v-if="label" class="gt-form-label-group">
				<view class="row">
					<view class="gt-form-label-left"></view>
					<view class="gt-form-label-required">*</view>
					<view class="gt-form-label">{{label}}</view>
				</view>
			</view>
			<view class="gt-form-body">
				<view class="gt-form-content ">
					<!-- 左ICON & 左文字 -->
					<!-- 输入框 -->
					<view class="row gt-form-select">
						<uni-datetime-picker :value="val" @change="changeDate" :placeholder="placeholder" :type="type" :border="false"  class="row-auto"></uni-datetime-picker>
					</view>
					

				<!-- 	<uni-icons v-if="value !== ''" type="clear" size="24px" color="#C0C4CC" @click="clearValue()"
						style="cursor: pointer;z-index: 1;"></uni-icons> -->
					<!-- 右ICON & 右文字 -->
					<!-- <slot v-else name="right">
						<view class="gt-form-content-right" v-if="rightIcon || rightText">
							<text class="gt-form-content-text"
								:class="rightIcon && rightText ? 'rightIconTextMargin' : ''">{{rightText}}</text>
							<view class="gt-form-content-icon iconfont" style="font-size: 14px !important;"
								:class="rightIcon"></view>
						</view>
					</slot> -->
				</view>

			</view>
		</view>
		<view v-if="error!== false" class="gt-form-error">{{error}}</view>
	</view>
</template>

<script>
	export default {
		name: "gt-select-datetime",
		props: {
			value: {
				type: [String, Number],
				default: function() {
					return ''
				}
			},
			start: {
				type: String,
				default: ''
			},
			type:{
				type: String,
				default: 'datetime'//date/daterange/datetime/datetimerange
			},
			format: {
				type: String,
				default: 'yyyy-MM-dd'
			},
			end: {
				type: String,
				default: ''
			},
			inputStyle: {
				type: String,
				default: ''
			},
			placeholderStyle: {
				type: String,
				default: 'color:#777'
			},





			label: {
				type: String,
				default: ''
			},
			field: {
				type: String,
				default: ''
			},
			desc: {
				type: String,
				default: ''
			},
			disabled: {
				type: Boolean,
				default: false
			},
			required: {
				type: [String, Boolean],
				default: ''
			},
			error: {
				type: [String, Boolean],
				default: false
			},
			emptyText: {
				type: String,
				default: '无数据'
			},
			placeholder: {
				type: [String, Boolean],
				default: '请选择'
			},
			placeholderClass: {
				type: String,
				default: 'placeholderClass'
			},
			leftIcon: {
				type: String,
				default: ''
			},
			rightIcon: {
				type: String,
				// default: 'icon-unfold'
				default: ''
			},
			leftText: {
				type: String,
				default: ''
			},
			rightText: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				range: [],
			}
		},
		created() {
			Date.prototype.format = function(fmt) {
				var o = {
					"M+": this.getMonth() + 1, //月份
					"d+": this.getDate(), //日
					"h+": this.getHours(), //小时
					"m+": this.getMinutes(), //分
					"s+": this.getSeconds(), //秒
					"q+": Math.floor((this.getMonth() + 3) / 3), //季度
					"S": this.getMilliseconds() //毫秒
				};

				if (/(y+)/.test(fmt)) {
					fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
				}

				for (var k in o) {
					if (new RegExp("(" + k + ")").test(fmt)) {
						fmt = fmt.replace(
							RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k])
								.length)));
					}
				}
				return fmt;
			}
			if (this.value) {
				this.$emit('input', (new Date(this.value)).format(this.format))
			}

		},
		computed: {
			val() {
				let date = '';
				if (this.value) {
					console.log((new Date(this.value)))
					date = (new Date(this.value)).format(this.format);
				}
				return date;
			}
		},
		methods: {
			clearValue() {
				console.log(11111111)
				this.$emit('input', '', this.field)
			},
			changeDate(e) {
				console.log(e)
				this.$emit('input', e)
			},
			change(e) {
				let date = new Date(e.detail.value);
				// console.log(date,this.format,date.format(this.format))
				console.log(date.format(this.format))
				this.$emit('input', date.format(this.format), this.field)
			},
		}
	}
</script>

<style scoped>
	.clearBtn {
		width: 15px;
		height: 15px;
		background-color: rgba(0, 0, 0, .3);
		line-height: 15px;
		border-radius: 7.5px;
		margin-top: 7.5px;
	}

	.gt-select-datetime .uni-date-x .icon-calendar{
		display: none !important;
	}
</style>